import { defineComponent, computed, ref, watch } from 'vue'
import { isEqual, cloneDeep } from 'lodash-es'
import { handleCheckFilterConditionTree } from './conditionFormConfig'
import ConditionGroup from '@/components/conditionGroup/index'
import AddConditionButton from '@/components/conditionGroup/AddConditionButton'
import ConditionConfig from './conditionConfig.vue'
import style from './style.module.less'

export default defineComponent({
  name: 'FilterComponent',
  components: {
    ConditionGroup,
    AddConditionButton,
    ConditionConfig
  },
  props: {
    /**
     * 数据格式参考
     * [
     *  {
     *    filterColumnName: 'id', // 选中字段后，字段的值（相当于字段id）
     *    title: '字段名称', // 显示到页面上的字段名称
     *    type: 'DATE' // 字段类型
     *  }
     * ]
     */
    fieldList: {
      type: Array,
      default: () => []
    },
    // 动态值下拉字段
    dynamicFieldList: {
      type: Array,
      default: () => []
    },
    /**
     * 传入按钮的text,默认 搜索
     */
    btnText: {
      type: String,
      default: ''
    },
    // 等同于filterConditionTree, 目的是用于数据回填
    condition: {
      type: Object,
      default: () => ({})
    },
    // 仅仅用于数据回填,展示
    onlyShow: {
      type: Boolean,
      default: false
    },
    // 是否展示公式功能按钮
    showFormulaBtn: {
      type: Boolean,
      default: false
    },
    // 是否显示搜索按钮
    showSearchBtn: {
      type: Boolean,
      default: true
    },
    filterDynamicFieldFunc: {
      type: Function as PropType<(columnInfo: FiledListType, fieldList: FiledListType[]) => FiledListType[]>
    }
  },
  setup(props, { expose }) {
    const conditionGroup = ref()

    const filterConditionTree = ref({})

    watch(
      () => props.condition,
      () => {
        if (!isEqual(props.condition, filterConditionTree.value)) {
          filterConditionTree.value = cloneDeep(props.condition)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    const btnGroupClass = computed(() => {
      return props.onlyShow ? style.hide : style['condition-button-group']
    })

    // 添加条件过滤
    const handleAddCondition = operator => {
      conditionGroup.value.handleAddCondition(operator, {
        filterType: 'CONDITION',
        filterCondition: {
          filterColumnName: '',
          type: '',
          conditionType: '',
          dateFormat: 'yyyy-MM-dd',
          value: null
        }
      })
    }

    // 选中条件节点
    const handleSelectConditionNode = (currentNode, parentNode) => {
      conditionGroup.value.handleSelectCondition(currentNode, parentNode)
    }

    /**
     * 组件是否填写完整的验证
     */
    const handleValidate = () => {
      if (!handleCheckFilterConditionTree(filterConditionTree.value)) {
        return Promise.reject(filterConditionTree.value)
      }
      return Promise.resolve(filterConditionTree.value)
    }

    const handleDeleteAllNode = () => {
      conditionGroup.value.handleDeleteAllCondition()
    }
    expose({
      filterConditionTree,
      // 暴露给组件外校验过滤条件是否合法的方法
      handleValidate,
      handleDeleteAllNode
    })

    return () => (
      <div class={style.box}>
        {props.onlyShow && <div class={style.mark}></div>}
        <condition-group ref={conditionGroup} v-model:modelValue={filterConditionTree.value}>
          {{
            buttonGroup: () => (
              <div class={btnGroupClass.value}>
                {/* 添加条件过滤的按钮 */}
                <add-condition-button
                  class={style['condition-button']}
                  buttonType="条件"
                  onClick={handleAddCondition}
                />
              </div>
            ),
            // 条件过滤
            expressionSlot: ({ expression, node, parentNode }) => {
              if (expression.filterType === 'CONDITION') {
                return (
                  <condition-config
                    condition-config={expression.filterCondition}
                    field-list={props.fieldList}
                    dynamic-field-list={props.dynamicFieldList}
                    filterDynamicFieldFunc={props.filterDynamicFieldFunc}
                    onSelectCondition={() => handleSelectConditionNode(node, parentNode)}
                  />
                )
              }
            }
          }}
        </condition-group>
      </div>
    )
  }
})
